<template>
  <div class="topRec_List">
    <dl>
      <dd>合规风险名称</dd>
      <dd>关联业务</dd>
      <dd>触发法规</dd>
      <dd>发生时间</dd>
      <dd>状态</dd>
    </dl>
    <div class="maquee" @mouseenter="closeScroll" @mouseleave="openScroll">
      <ul ref="ul">
        <li v-for="item in state.tableData" :key="item.id">
          <div v-if="item.riskName.length <= 13">{{ item.riskName }}</div>
          <el-tooltip
            v-if="item.riskName.length > 13"
            effect="dark"
            :content="item.riskName"
            placement="top"
            :show-after="200"
          >
            <div>{{ item.riskName }}</div>
          </el-tooltip>
          <div>{{ item.linkBusiness }}</div>
          <div>{{ item.regulations }}</div>
          <div>{{ item.startTime }}</div>
          <div v-if="item.riskStatus == 1">
            <span class="span-not">
              <el-icon size="18px"> <Warning /> </el-icon>&nbsp;未处理
            </span>
          </div>
          <div v-else-if="item.riskStatus == 2">
            <span class="span-ing">
              <el-icon class="is-loading" size="18px"> <Loading /> </el-icon
              >&nbsp;处理中
            </span>
          </div>
          <div v-else>
            <span class="span-ed">
              <el-icon size="18px"> <Check /> </el-icon>&nbsp;已处理
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Loading } from "@element-plus/icons-vue";
// 监听屏幕大小发生改变则刷新屏幕
// window.onresize = () => {
//   return location.reload();
// };
const ul = ref<HTMLDivElement | null>(null);
const oul = () => ul.value as HTMLDivElement;
let timer = null;
const state = reactive({
  tableData: [
    {
      id: 1,
      riskName: "用户画像使用不规范",
      linkBusiness: "员工移动营销服务平台",
      regulations: "《个人信息保护法》",
      startTime: "2022/09/21 13:33:20",
      riskStatus: 1,
    },
    {
      id: 2,
      riskName: "个性化展示使用不规范",
      linkBusiness: "员工移动营销服务平台",
      regulations: "《个人信息保护法》",
      startTime: "2022/09/02 09:08:32",
      riskStatus: 1,
    },
    {
      id: 3,
      riskName: "个人信息收集不合法",
      linkBusiness: "零售客户经营平台",
      regulations: "《个人信息保护法》",
      startTime: "2022/08/11 12:45:03",
      riskStatus: 1,
    },
    {
      id: 4,
      riskName: "未采取严格措施限制访问敏感个人信息",
      linkBusiness: "零售客户经营平台",
      regulations: "《个人信息保护法》",
      startTime: "2022/10/05 14:22:34",
      riskStatus: 3,
    },
    {
      id: 5,
      riskName: "未建立全流程个人信息保护制度",
      linkBusiness: "零售业务领域集市",
      regulations: "《个人信息保护法》",
      startTime: "2022/10/24 05:38:20",
      riskStatus: 2,
    },
    {
      id: 6,
      riskName: "未建立数据分类分级制度",
      linkBusiness: "零售业务领域集市",
      regulations: "《数据安全法》",
      startTime: "2022/10/11 11:09:35",
      riskStatus: 2,
    },
    {
      id: 7,
      riskName: "未采取防范危害网络安全行为技术措施",
      linkBusiness: "中信大脑",
      regulations: "《网络安全法》",
      startTime: "2022/07/15 18:32:45",
      riskStatus: 1,
    },
    {
      id: 8,
      riskName: "未建立数据安全专门机构",
      linkBusiness: "中信大脑",
      regulations: "《数据安全法》",
      startTime: "2022/07/26 10:24:56",
      riskStatus: 1,
    },
    {
      id: 9,
      riskName: "利用违法和不良信息诱导用户下载",
      linkBusiness: "新版个人移动银行",
      regulations: "《移动互联网应用程序信息服务管理规定》",
      startTime: "2022/10/02 20:08:35",
      riskStatus: 1,
    },
    {
      id: 10,
      riskName: "APP不符合相关国家标准的强制性要求",
      linkBusiness: "新版个人移动银行",
      regulations: "《移动互联网应用程序信息服务管理规定》",
      startTime: "2022/09/01 12:00:34",
      riskStatus: 1,
    },
  ],
});
// 开启滚动
const openScroll = () => {
  timer = setInterval(() => {
    if (Math.ceil(oul().scrollTop + oul().clientHeight) >= oul().scrollHeight) {
      oul().scrollTop = 0;
    } else {
      oul().scrollTop = oul().scrollTop + 1;
    }
  }, 30);
};
// 关闭滚动
const closeScroll = () => {
  clearInterval(timer);
  timer = null;
};

onMounted(() => {
  openScroll();
});
</script>

<style lang="scss" scoped>
.topRec_List {
  height: calc(100% - 0.4375rem);
  padding: 0 5%;
  dl,
  .maquee {
    height: calc(100%);
    width: 100%;
    margin: 0 auto;
    color: #f0ece2;
  }

  dl {
    display: flex;
    height: 0.375rem;
    line-height: 0.375rem;
    border-bottom: 0.0125rem solid #1b96ee;

    dd {
      text-align: center;
      color: #1b96ee;
      font-size: 0.2rem;
      background-color: #0d2c71;
      color: #fff;
      margin-left: 0.05rem;
    }

    dd:nth-child(1) {
      width: 22%;
      margin-left: 0;
    }

    dd:nth-child(2) {
      width: 20%;
    }

    dd:nth-child(3) {
      width: 25%;
    }

    dd:nth-child(4) {
      width: 25%;
    }

    dd:nth-child(5) {
      width: 15%;
      padding-left: 0.125rem;
    }
  }

  .maquee {
    height: 89%;
  }

  ul {
    width: 100%;
    height: 95%;
    overflow-y: scroll;
    overflow-x: hidden;

    li {
      width: 100%;
      height: 0.45rem;
      line-height: 0.45rem;
      text-align: center;
      color: #fff;
      display: flex;
      font-size: 0.2rem;

      div {
        color: #fff;
        font-size: 0.1625rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 0.025rem;
      }

      div:nth-child(1) {
        width: 25%;
      }

      div:nth-child(2) {
        width: 22%;
      }

      div:nth-child(3) {
        width: 26%;
      }

      div:nth-child(4) {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
      }

      div:nth-child(5) {
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: center;

        .span-not {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 0.75rem;
          height: 0.375rem;
          // border: .0125rem solid red;
          color: red;
          // 未处理
        }

        .span-ing {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 0.75rem;

          height: 0.375rem;
          // border: .0125rem solid rgb(213, 195, 2);
          color: rgb(255, 255, 65);
          // 未处理
        }

        .span-ed {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 0.75rem;

          height: 0.375rem;
          // border: .0125rem solid rgb(0, 255, 8);
          color: rgb(46, 250, 53);
          // 未处理
        }
      }
    }
  }
}

/* 滚动条 */
::-webkit-scrollbar {
  z-index: 50;
  width: 0.0375rem;
  height: 0.0375rem;
  border: none;
  outline: none;
}

* {
  cursor: pointer;
}

::-webkit-scrollbar-track {
  background-color: rgba(206, 14, 14, 0);
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0.0625rem;
  -moz-border-radius: 0.0625rem;
  border-radius: 0.0625rem;
  background-color: #1bb4f9;
  transition: all 0.2s;
  height: 0.25rem;
}

:hover::-webkit-scrollbar-thumb {
  transition: all 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to top, #00d9a2, #007af8);
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-corner {
  display: none;
}
</style>
